import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import axios from '@/http'
import { baseURL } from '@/http'

const Login = () => import('../views/user/login.vue')
const Register = () => import('../views/user/register.vue')
const Index = () => import('../views/index/index.vue')
const Blog = () => import('../views/blog/blogItem.vue')
const BlogDetail = () => import('../views/blog/blogDetail.vue')
const Advice = () => import('../views/advice/MyMessage.vue')
const Me = () => import('../views/Me/blogger.vue')
const Mine = () => import('../views/mine/mine.vue')
const Friend = () => import('../views/friend/friend.vue')
const Socket = () => import('../views/socket/socket.vue')
const ChartRoom = () => import('../views/chatRoom/chatRoom.vue')
const Virus = () => import('../views/map/map/index.vue')
const Home = () => import('../views/music/music.vue')
const SongList = () => import('../views/music/songInfo/songInfo.vue')
const SingerList = () => import('../views/music/singer/singer.vue')
const NewMusic = () => import('../views/music/newMusic/newMusic.vue')
const Album = () => import('../views/music/newMusic/prod/album/album.vue')
const Forget = () => import('../views/user/forget.vue')
const Game = () => import('../views/game/game.vue')
const Picture = () => import('../views/picture/picture.vue')
const No = () => import('../views/404/404.vue')
const Links = () => import('../views/links/Links.vue')
const Tool = () => import('../views/tool/tool.vue')

const IndexH5 = () => import('../h5/index/index.vue')
const BlogH5 = () => import('../h5/blog/blog.vue')
const DetailH5 = () => import('../h5/blog/blogDetail.vue')
const AdviceH5 = () => import('../h5/advice/advice.vue')
const ChatH5 = () => import('../h5/chat/index.vue')
const ChatRoomH5 = () => import('../h5/chat/chatRoom.vue')
const ChatMeH5 = () => import('../h5/chat/chat.vue')
const SourceH5 = () => import('../h5/source/source.vue')
const VideoH5 = () => import('../h5/video/video.vue')
const NavH5 = () => import('../h5/nav/nav.vue')
const MeH5 = () => import('../h5/me/index.vue')
const pdfH5 = () => import('../h5/pdf/pdf.vue')

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/index-h5',
    component: IndexH5,
    children: [
      {
        path: '/index-h5',
        component: BlogH5
      },
      {
        path: '/detail-h5/:id',
        component: DetailH5
      },
      {
        path: '/advice-h5',
        component: AdviceH5
      },
      {
        path: '/chat-h5',
        component: ChatH5
      },
      {
        path: '/chatRoom-h5',
        component: ChatRoomH5
      },
      {
        path: '/chatMe-h5',
        component: ChatMeH5
      },
      {
        path: '/source-h5',
        component: SourceH5
      },
      {
        path: '/video-h5',
        component: VideoH5
      },
      {
        path: '/nav-h5',
        component: NavH5
      },
      {
        path: '/pdf-h5',
        component: pdfH5
      },
      {
        path: '/me-h5',
        component: MeH5
      }
    ]
  },
  {
    path: '/index',
    component: Index,
    children: [
      {
        path: '/index',
        name: 'Index',
        component: Blog,
        meta: {
          keepAlive: true
        }
      },
      {
        path: '/detail/:id',
        component: BlogDetail
      },
      {
        path: '/message',
        component: Advice
      },
      {
        path: '/me',
        component: Me
      },
      {
        path: '/mine',
        component: Mine
      },
      {
        path: '/friend',
        component: Friend
      },
      {
        path: '/chart',
        component: Socket
      },
      {
        path: '/chartRoom',
        component: ChartRoom
      },
      {
        path: '/virus',
        component: Virus
      },
      {
        path: '/home',
        redirect: '/home/advice'
      },
      {
        path: '/game',
        component: Game
      },
      {
        path: '/picture',
        component: Picture
      },
      {
        path: '/links',
        component: Links
      },
      {
        path: '/tool',
        component: Tool,
        name: 'Tool',
        redirect: '/tool/main',
        children: [
          {
            path: '/tool/main',
            name: 'ToolMain',
            component: () => import('../views/tool/main/main.vue')
          },
          {
            path: '/tool/translate',
            name: 'Translate',
            component: () => import('../views/tool/translate/translate.vue')
          },
          {
            path: '/tool/apiJson',
            name: 'ApiJson',
            component: () => import('../views/tool/transformJson/transformJson.vue')
          },
          {
            path: '/tool/nav',
            name: 'Nav',
            component: () => import('../views/tool/Nav/index.vue')
          },
          {
            path: '/tool/pdf',
            name: 'Pdf',
            component: () => import('../views/tool/pdf/pdf.vue')
          },
          {
            path: '/tool/md5',
            name: 'Md5',
            component: () => import('../views/tool/Md5/index.vue')
          },
          {
            path: '/tool/cut',
            name: 'ImageCut',
            component: () => import('../views/tool/ImageCut/index.vue')
          }
        ]
      },
      {
        path: '/home/:id',
        name: 'Home',
        component: Home,
        children: [
          {
            path: '/home/advice',
            name: 'Advice',
            component: () => import('../views/music/advice/advice.vue')
          },
          {
            path: '/home/song',
            name: 'Song',
            component: () => import('../views/music/songList/songList.vue')
          },
          {
            path: '/home/rank',
            name: 'Rank',
            component: () => import('../views/music/rank/rank.vue')
          },
          { path: '/home/singer', name: 'Singer', component: SingerList },
          {
            path: '/home/singerInfo/:id',
            name: 'SingerInfo',
            component: () => import('../views/music/singerInfo/singerInfo.vue')
          },
          { path: '/home/playList/:id', name: 'SongList', component: SongList },
          { path: '/home/newMusic', name: 'NewMusic', component: NewMusic },
          { path: '/home/albumInfo/:id', name: 'AlbumInfo', component: Album }
        ]
      }
    ]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/register',
    component: Register
  },
  {
    path: '/forget',
    component: Forget
  },
  {
    path: '/404',
    component: No
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404'
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
router.beforeEach((to, from, next) => {
  let weather: HTMLDivElement | null = document.querySelector('#weather')
  if(weather) {
    to.fullPath === '/index' ? (weather!.style.zIndex = '100') : (weather!.style.zIndex = '-100')
  }
  axios.defaults.baseURL = /\/home/.test(to.path) ? 'https://www.ttzxh.icu/musics' : baseURL
  next()
})

export default router
